<template>
  <!-- <div class="nav">
        <div class="container flex-row al-c pointer j-sb">
            <span :class="activeRoute==route.path?'active route flex-row al-c j-c':'route flex-row al-c j-c'" v-for="(route,index) in routes" :key="index+'-'+route.path" @click="toPath(route)">
                {{route.meta.name}}
            </span>
        </div>
  </div>-->
  <!-- 轮播 -->
  <div class="w100 bg-fff flex-al">
    <div class="nav">
      <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
        <!-- slides -->
        <swiper-slide
          v-for="(route, index) in routes"
          :key="index + '-' + route.path"
          @click="toPath(route)"
        >
          <div class="flex-al navli" @click="toPath(route)">
            <img :src="require('../../assets/imgs/h5/'+route.name+'.png') " alt />
            {{ route.meta.name }}
          </div>
        </swiper-slide>
        <div class="swiper-pagination" id="pagination" slot="pagination"></div>
      </swiper>
    </div>
  </div>
</template>
<script>
import Swiper from "swiper";
import router from "@/router";
export default {
  data() {
    return {
      routes: [],
      activeRoute: "/",
      swiperOption: {
        pagination: ".swiper-pagination",
        slidesPerView: 5,
        watchSlidesProgress: true,
        paginationType: "progress"
      }
    };
  },
  mounted() {},
  created() {
    this.routes = this.getRoutes();
    this.activeRoute = this.$route.path;
  },
  watch: {
    $route: function(val) {
      this.activeRoute = val.path;
    }
  },
  methods: {
    callback() {},
    getImgName(pathName) {
      switch (pathName) {
        default:
          return `../../assets/imgs/h5/${pathName}.png`;
          break;
      }
    },
    getRoutes() {
      let routes = router.options.routes;
      console.log(routes);
      let route = new Array();
      routes.forEach(val => {
        if (val.meta.pid === 0) {
          route.push(val);
        }
      });
      return route;
    },
    toPath(route) {
      if (route.meta.name == "专家培训") {
        window.open("http://h5.cbda1984.com/#/onStudy");
        return;
      }
      this.$router.push({
        path: route.path
      });
    }
  }
};
</script>
<style lang="less">
.nav {
  width: 90%;
  overflow: hidden;
  background: #ffffff;
  font-size: 12px;
  padding: 25px 0;
  color: #666666;
  text-align: center;
  .navli {
    img {
      width: 46px;
      height: 46px;
      margin-bottom: 4px;
    }
  }
}
</style>
